<template>
  <div class="viewport">
    <TmallNavBar>
      <template #default>商品分类</template>
    </TmallNavBar>

    <!-- 搜索框 -->
    <div class="search">
      <div class="input" @click="$router.push('/goodsSearch')">
        <span class="icon-search iconfont icon-sousuo">搜索商品</span>
      </div>
    </div>

    <!-- 分类 -->
    <div class="categories">
      <!-- 左侧：一级分类 -->
      <div class="primary">
        <div>
          <div
            v-for="(item, index) in topCategoryList"
            :key="item.cid"
            class="item"
            :class="{ active: index === currentIndex }"
            @click="selectTopCategory(item, index)"
          >
            <span class="name"> {{ item.name }} </span>
          </div>
        </div>
      </div>

      <!-- 右侧：子级分类 -->
      <div class="secondary">
        <div>
          <!-- 焦点图 -->
          <TmallSwiper class="banner" :banners="bannerList" />

          <!-- 内容区域 -->
          <div class="panel" v-for="item in subCategoryList" :key="item.cid">
            <div class="title">
              <span class="name">{{ item.name }}</span>
            </div>
            <div class="section">
              <div v-for="category in item.children" :key="category.cid" class="goods">
                <img v-if="category.icon_url" class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + category.icon_url" />

                <div v-else class="default_image">
                  <van-image :src="defaultCategoryImage"></van-image>
                </div>
                <div class="cate_name">{{ category.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回顶部组件 -->
      <TmallBackTop :bottom="120" @backTop="backTop" v-if="isShowBackTop"/>
    </div>
  </div>
</template>
  
<script setup>
import { reactive, ref, inject, onMounted } from 'vue'
import BScroll from 'better-scroll'
import { reqGetBannersAPI, reqGetCategoryListAPI, reqGetCategoryTreesAPI } from '@/apis/category'

import defaultCategoryImage from '@/assets/images/default_category.png'
  
  
// 全局属性
const global = inject('global')
  
  
  
  
// ----------------------- 返回顶部功能开始 -----------------------
const isShowBackTop = ref(false)

const backTop = () => {
  subscroll.scrollTo(0, 0, 500);
}
// ----------------------- 返回顶部功能结束 -----------------------
  
  
  
  
  
  
// ------------------------- 获取一级分类功能开始 -------------------------
const topCategoryList = ref([])
const getCategoryList = async () => {
  const result = await reqGetCategoryListAPI({pid: 0, status: 1, sort_type: 'asc'})
  topCategoryList.value = result.data.categories != null ? result.data.categories : []

  // 获取子分类
  categoryTreeParams.pid = topCategoryList.value[0].cid
  await getCategoryTrees()
}
// ------------------------- 获取一级分类功能结束 -------------------------
  
  
  
  
  
// ------------------------- 选择一级分类功能开始 -------------------------
const currentIndex = ref(0)
const selectTopCategory = async (item, index) => {
  currentIndex.value = index
  categoryTreeParams.pid = item.cid
  await getCategoryTrees()

  // 返回顶部
  subscroll.scrollTo(0, 0, 500)

  subscroll.refresh()
}
// ------------------------- 选择一级分类功能结束 -------------------------
  
  
  
  
  
// ------------------------- 获取子分类树功能开始 -------------------------
// 子分类树请求参数
const categoryTreeParams = reactive({
  pid: 'all',
  status: '1',
  is_childrens: 1,
})

// 子分类树
const subCategoryList = ref([])

// 获取子分类树
const getCategoryTrees = async () => {
  const result = await reqGetCategoryTreesAPI(categoryTreeParams)
  subCategoryList.value = result.data.categories != null ? result.data.categories : []
}
// ------------------------- 获取子分类树功能结束 -------------------------
  
  
  
  
  
// ------------------------- 获取轮播图功能开始 -------------------------
const bannerList = ref([])
const getBanners = async () => {
  const result = await reqGetBannersAPI({status: 1, type: 1})
  bannerList.value = result.data.banners != null ? result.data.banners : []
}
// ------------------------- 获取轮播图功能结束 -------------------------
  


  
const isFinish = ref(false)
let subscroll = reactive({})
onMounted( async () => {
  isFinish.value = false
  await Promise.all([getBanners(), getCategoryList()])

  // 一级分类 scroll
  new BScroll(document.querySelector('.primary'), {
    probeType: 3,
    click: true,
  })

  // 子级分类 scroll
  subscroll = new BScroll(document.querySelector('.secondary'), {
    probeType: 3,
    click: true,
  })

  // 监听滚动
  subscroll.on('scroll',(position) => {
    isShowBackTop.value = -position.y > 100;
  });

  isFinish.value = true
})

// 购物车存储
// const cartStore = useCartStore()

// 用户存储
// const userStore = useUserStore()

// onShow(async() => {
//   // 设置购物车数量图标
//   uni.setTabBarBadge({
//     index: 2,
//     text: cartStore.validTotal + ''
//   })

//   // 刷新TOKEN
//     await userStore.refreshToken('/pages/cart/cart')
// })
</script>
  
<style scoped lang="scss">
.viewport {
  height: calc(100vh - 200px);
  position:relative;
  background: ghostwhite;
}
  .search {
    margin-top: 40px;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid gainsboro;
    position:relative;
    z-index: 100;
    .input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32px;
      padding-left: 13px;
      color: #8b8b8b;
      font-size: 14px;
      border-radius: 16px;
      background-color: #f3f4f4;
      margin-top: 5px;
    }
  }
  .icon-search {
    &::before {
      margin-right: 5px;
    }
  }
  /* 分类 */
  .categories {
    flex: 1;
    // min-height: 200px;
    overflow: hidden;
    display: flex;
  }
  /* 一级分类 */
  .primary {
    height: calc(100vh - 150px);
    overflow: hidden;
    width: 25%;
    flex: none;
    background-color: #f6f6f6;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 3px 3px 10px;
      line-height: 48px;
      font-size: 13px;
      color: #595c63;
      position: relative;
  
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      &::after {
        content: '';
        position: absolute;
        left: 21px;
        bottom: 0;
        width: 50px;
        border-top: 1px solid #e3e4e7;
      }
    }
    .active {
      background-color: #fff;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background-color: #27ba9b;
      }
    }
  }
  .primary .item:last-child::after,
  .primary .active::after {
    display: none;
  }
  /* 二级分类 */
  .secondary {
    height: calc(100vh - 150px);
    background-color: #fff;
    width: 75%;
    .carousel {
      height: 100px;
      margin: 0 15px 10px;
      border-radius: 2px;
      overflow: hidden;
    }
    .panel {
      margin: 0 15px 0;
    }
    .title {
      height: 30px;
      line-height: 30px;
      color: #333;
      font-size: 14px;
      border-bottom: 1px solid #f7f7f8;
      .more {
        float: right;
        padding-left: 10px;
        font-size: 12px;
        color: #999;
      }
    }
    .more {
      &::after {
        font-family: 'erabbit' !important;
        content: '\e6c2';
      }
    }
    .section {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0;
      .goods {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin-bottom: 10px;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .image {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          box-shadow: 0 0 5px grey;
        }
        .default_image {
          display: flex;
          align-items: center;
          justify-content: center;
  
          width: 50px;
          height: 50px;
          border-radius: 5px;
          box-shadow: 0 0 5px grey;
  
          img {
            width: 40px;
            height: 40px;
          }
        }
        .name {
          padding: 2.5px;
          font-size: 11px;
          color: #333;
        }
        .cate_name {
          margin-top: 5px;
          font-size: 12px;
  
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:1;
        }
      }
    }
  }
</style>